<template>
	<!-- 首页   排行榜 -->
	<div>
		<div class="inputp">
			<div class="inputs">
				<img class='searchimg' src="/static/img/search.png" alt="" @click='search'>
				<input type="text" v-model="searchval" :placeholder="placeholder" ref='searchinput' :focus='isfocus' class='scaninput' @click='clickinput'>
				<div class='searchbtn' v-if='hassearchbtn' v-show='showsearchbtn' @click='search'>搜索</div>
			</div>
		</div>	
		<view class="container">
			<view class="botsny">种类排行榜
				<view>
					<view class="box">
						<view v-for="item in list">
							<image :src="item.categoryImg" class="L1"></image>
						</view>
					</view>
					<view class="box">
						<view v-for="item in list" @click="zlxi(item.id)">
							{{item.categoryName}}
						</view>
					</view>
				</view>
			</view>
			<br>
			<view class="animal">医生排行榜
				<view>
					<view class="box">
						<view v-for="aitem in animallist">
							<image :src="aitem.doctorPto" class="L1"></image>
						</view>
					</view>
					<view class="box">
						<view v-for="aitem in animallist" @click="ysxi(aitem.doctorId)">
							{{aitem.doctorName}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		props:{
			hassearchbtn:Boolean,//是否有搜索按钮
			isfocus:Boolean,//是否默认focus
			hasgosearch:Boolean,//是否要跳转到搜索界面
			types:Number,//跳转的时候的参数type值
			placeholder:{
				type:String,
				default:'输入疾病名或症状'
			},
			gourl:{//跳转的搜索页面
				type:String,
				default:'/pages/contact/contact'
			}
		},
		data() {
			return {
				showsearchbtn:false,
				searchval:'',
				// list:[
				// 	'玉米',
				// 	'小麦',
				// 	'大豆'
				// ],
				// list1:[
				// 	'花生',
				// 	'土豆',
				// 	'向日葵'
				// ],
				list:{},
				animallist:{}
				// animallist:[
				// 	'羊',
				// 	'兔',
				// 	'狗'
				// ],
				// animallist1:[
				// 	'鸡',
				// 	'鸭',
				// 	'鹅'
				// ],
			};
		},
		created(){
			this.zlph(),
			this.ysph()
		},
		methods:{
			//查看种类排行榜
			zlph(){
				uni.request({
					url: 'http://localhost:8099/serviceedu/category/top',
					method: 'GET',
					data: {},
					success: (res) => {
						console.log(res.data.data.list)
						this.list = res.data.data.list
					}
				})
			},
			
			//查看医生排行榜
			ysph(){
				uni.request({
					url: 'http://localhost:8099/serviceedu/doctor/top',
					method: 'GET',
					data: {},
					success: (res) => {
						console.log(res.data.data.list)
						this.animallist = res.data.data.list
					}
				})
			},
			
			// 点击input的时候
			clickinput(){
				var me = this;
				if(me.hasgosearch){
					console.log('需要跳转')
					uni.navigateTo({
						url:`${me.gourl}?type=${me.types}`
					})
				}
			},
			// 搜索
			search(){
				var me = this;
				if(me.searchval==''){
					uni.showToast({
						icon:'none',
						title:'请先输入再搜索'
					})
					return;
				}
				if(me.searchval!=''){
					uni.switchTab({
						url:'../index/index'
					})
				}
				me.$emit('serach',me.searchval)
				
			},
			ysxi(doctorId){
				uni.reLaunch({
					url: '../index/doctor?aaa=' + doctorId
				})
				//排行榜医生自增
				uni.request({
					url:'http://localhost:8099/serviceedu/doctor/browse/'+doctorId,
					method:'GET',
					success:(res)=>{
						console.log(res.data.data.count)
					}
				})
			
			},
			zlxi(id){
				uni.reLaunch({
					url: '../index/category?aaa=' + id
				})
				// 排行榜种类自增
				uni.request({
					url:'http://localhost:8099/serviceedu/category/browse/'+id,
					method:'GET',
					success:(res)=>{
						console.log(res.data.data.count)
					}
				})
			
			},
		},
		watch:{
			searchval(v){
				var me = this;
				me.$emit('inputchange',v)
				if(v!=''){
					me.showsearchbtn = true;
				}else{
					me.showsearchbtn = false;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.inputp{
		padding:20upx;
		.inputs{
			background:#F2F2F2;
			border-radius:20upx;
			position:relative;
			.scaninput{
				padding:20upx 80upx 20upx 80upx;
			}
			.searchimg{
				width:1em;
				height:1em;
				position:absolute;
				top:25upx;
				left:20upx;
			}
			.scanimg{
				width:1em;
				height:1em;
				position:absolute;
				top:25upx;
				right:20upx;
			}
			.searchbtn{
				position:absolute;
				right:20upx;top:15upx;
				border-radius:5upx;
				background:#007AFF;
				color:#fff;
				width:4em;
				line-height: 2em;
				text-align: center;
				font-size: 0.8em;
			}
		}
	}
	.box{
		border:lupx solid #333333;
		height: 100%;
		width: 100%;
		display: flex;
		margin-top: 10px;
		// background-color: blue;
	}
	.box>view{
		color: #000000;
		font-weight: bold;
		font-size: 40upx;
		flex: 1;
		height: 80upx;
		display: flex;
		justify-content: center;
		border: 1upx solid #FFFFFF;
	}
	.L1{
		width: 50px;
		height: 50px;
	}
	.container{
		/* 定义容器 */
		display: flex;
		/* 设置容器排列方向 */
		flex-direction: column;
		height: 100%;
		justify-content: space-around;
	}
	.botsny{
		// background-color: blue;
		height: 100%;
	}
	.animal{
		// background-color: green;
		height: 200px;
	}
</style>
